<template>
  <div class="page-title-box margin-b-10 flex-par">
    <img src="../../assets/image/icon6.png" class="title-icon" alt="">
    <div>账号与安全</div>
  </div>
  <div class="list-content white-bk">
    <!-- 个人信息修改区域 -->
    <div class="security-section">
      <div class="section-title">
        <img src="../../assets/image/icon7.png" class="section-icon" alt="">
        <span>个人信息</span>
      </div>
      <div class="form-container">
        <el-form :model="profileForm" :rules="profileRules" ref="profileForm" label-width="100px">
          <el-form-item label="中文名称" prop="cnName">
            <el-input v-model="profileForm.cnName" placeholder="请输入中文名称" style="width: 300px;"></el-input>
          </el-form-item>
          <el-form-item label="当前密码" prop="currentPassword">
            <el-input v-model="profileForm.currentPassword" type="password" placeholder="请输入当前密码验证身份" style="width: 300px;"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="updateProfile" :loading="profileLoading">保存资料</el-button>
            <el-button @click="resetProfileForm">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- 密码修改区域 -->
    <div class="security-section">
      <div class="section-title">
        <img src="../../assets/image/icon8.png" class="section-icon" alt="">
        <span>密码安全</span>
      </div>
      <div class="form-container">
        <el-form :model="passwordForm" :rules="passwordRules" ref="passwordForm" label-width="100px">
          <el-form-item label="当前密码" prop="currentPassword">
            <el-input v-model="passwordForm.currentPassword" type="password" placeholder="请输入当前密码" style="width: 300px;"></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="newPassword">
            <el-input v-model="passwordForm.newPassword" type="password" placeholder="请输入新密码" style="width: 300px;"></el-input>
            <div class="password-tips">
              <div class="tip-item" :class="{ 'active': passwordStrength.length }">
                <span class="tip-dot"></span>
                包含字母
              </div>
              <div class="tip-item" :class="{ 'active': passwordStrength.number }">
                <span class="tip-dot"></span>
                包含数字
              </div>
              <div class="tip-item" :class="{ 'active': passwordStrength.special }">
                <span class="tip-dot"></span>
                包含特殊字符
              </div>
              <div class="tip-item" :class="{ 'active': passwordStrength.length }">
                <span class="tip-dot"></span>
                至少6位
              </div>
            </div>
          </el-form-item>
          <el-form-item label="确认密码" prop="confirmPassword">
            <el-input v-model="passwordForm.confirmPassword" type="password" placeholder="请再次输入新密码" style="width: 300px;"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="changePassword" :loading="passwordLoading">修改密码</el-button>
            <el-button @click="resetPasswordForm">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- 安全提示 -->
    <div class="security-tips">
      <div class="tips-title">安全提示</div>
      <ul class="tips-list">
        <li>密码应包含字母、数字和特殊字符，长度至少6位</li>
        <li>建议定期修改密码，提高账号安全性</li>
        <li>请勿使用过于简单的密码，如123456、password等</li>
        <li>修改密码后，系统会记录操作日志</li>
      </ul>
    </div>
  </div>
</template>
<script>
import { updateUserProfile, changePassword, getKaifaData } from '@/assets/api/api.js';

export default {
  data: function () {
    return {
      // 个人信息表单
      profileForm: {
        cnName: '',
        currentPassword: ''
      },
      // 密码修改表单
      passwordForm: {
        currentPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      // 表单验证规则
      profileRules: {
        cnName: [
          { required: true, message: '请输入中文名称', trigger: 'blur' },
          { min: 1, max: 50, message: '中文名称长度在1-50个字符之间', trigger: 'blur' }
        ],
        currentPassword: [
          { required: true, message: '请输入当前密码', trigger: 'blur' }
        ]
      },
      passwordRules: {
        currentPassword: [
          { required: true, message: '请输入当前密码', trigger: 'blur' }
        ],
        newPassword: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 6, max: 50, message: '密码长度在6-50个字符之间', trigger: 'blur' },
          { 
            pattern: /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]).*$/, 
            message: '密码必须包含字母、数字和特殊字符', 
            trigger: 'blur' 
          }
        ],
        confirmPassword: [
          { required: true, message: '请确认新密码', trigger: 'blur' },
          { validator: this.validateConfirmPassword, trigger: 'blur' }
        ]
      },
      // 加载状态
      profileLoading: false,
      passwordLoading: false,
      // 密码强度检测
      passwordStrength: {
        length: false,
        number: false,
        special: false
      },
      // 用户数据
      kaifaData: {}
    }
  },
  mounted() {
    this.getKaifaDataF()
  },
  methods: {
    // 获取开发者数据
    getKaifaDataF() {
      getKaifaData()
        .then((res) => {
          console.log(res)
          if (res.code == 0) {
            this.kaifaData = res.data
            this.profileForm.cnName = res.data.cnName || ''
          }
        })
        .catch((err) => { });
    },
    
    // 更新个人信息
    updateProfile() {
      this.$refs.profileForm.validate((valid) => {
        if (valid) {
          this.profileLoading = true
          updateUserProfile(this.profileForm)
            .then((res) => {
              if (res.code === 0) {
                this.$message.success('资料更新成功')
                this.getKaifaDataF() // 重新获取数据
                this.resetProfileForm()
              } else {
                this.$message.error(res.message || '资料更新失败')
              }
            })
            .catch((err) => {
              this.$message.error('网络错误，请稍后重试')
            })
            .finally(() => {
              this.profileLoading = false
            })
        }
      })
    },
    
    // 修改密码
    changePassword() {
      this.$refs.passwordForm.validate((valid) => {
        if (valid) {
          this.passwordLoading = true
          changePassword(this.passwordForm)
            .then((res) => {
              if (res.code === 0) {
                this.$message.success('密码修改成功')
                this.resetPasswordForm()
              } else {
                this.$message.error(res.message || '密码修改失败')
              }
            })
            .catch((err) => {
              this.$message.error('网络错误，请稍后重试')
            })
            .finally(() => {
              this.passwordLoading = false
            })
        }
      })
    },
    
    // 验证确认密码
    validateConfirmPassword(rule, value, callback) {
      if (value !== this.passwordForm.newPassword) {
        callback(new Error('两次输入的密码不一致'))
      } else {
        callback()
      }
    },
    
    // 重置个人信息表单
    resetProfileForm() {
      this.$refs.profileForm.resetFields()
      this.profileForm.currentPassword = ''
    },
    
    // 重置密码表单
    resetPasswordForm() {
      this.$refs.passwordForm.resetFields()
    },
    
    // 监听新密码输入，检测密码强度
    checkPasswordStrength() {
      const password = this.passwordForm.newPassword
      this.passwordStrength.length = password.length >= 6
      this.passwordStrength.number = /\d/.test(password)
      this.passwordStrength.special = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(password)
    }
  },
  watch: {
    'passwordForm.newPassword': {
      handler: 'checkPasswordStrength',
      immediate: true
    }
  }
};
</script>
<style scoped>
.page-title-box {
  height: 60px;
  line-height: 60px;
  color: #00152A;
  font-size: 18px;
  font-weight: 600;
  background-color: white;
  padding: 0 20px;
}

.title-icon {
  height: 35px;
  margin: 12.5px 5px 0 10px;
}

.list-content {
  height: calc(100% - 70px);
  overflow: auto;
  background: #f8f8f8;
  padding: 20px;
}

/* 安全区域样式 */
.security-section {
  background: white;
  border-radius: 10px;
  margin-bottom: 20px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.section-title {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #f0f0f0;
}

.section-icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}

.form-container {
  padding: 0 20px;
}

/* 密码强度提示 */
.password-tips {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 8px;
}

.tip-item {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #999;
  transition: color 0.3s;
}

.tip-item.active {
  color: #67c23a;
}

.tip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ddd;
  margin-right: 5px;
  transition: background 0.3s;
}

.tip-item.active .tip-dot {
  background: #67c23a;
}

/* 安全提示区域 */
.security-tips {
  background: #f8f9fa;
  border-radius: 10px;
  padding: 20px;
  margin-top: 20px;
}

.tips-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 15px;
}

.tips-list {
  margin: 0;
  padding-left: 20px;
}

.tips-list li {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 8px;
}

/* 表单样式优化 */
.el-form-item {
  margin-bottom: 20px;
}

.el-form-item__label {
  font-weight: 500;
  color: #333;
}

.el-input__inner {
  border-radius: 6px;
  border: 1px solid #dcdfe6;
  transition: border-color 0.3s;
}

.el-input__inner:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

.el-button {
  border-radius: 6px;
  font-weight: 500;
}

.el-button--primary {
  background: #409eff;
  border-color: #409eff;
}

.el-button--primary:hover {
  background: #66b1ff;
  border-color: #66b1ff;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .list-content {
    padding: 10px;
  }
  
  .security-section {
    padding: 15px;
  }
  
  .form-container {
    padding: 0 10px;
  }
  
  .password-tips {
    flex-direction: column;
    gap: 8px;
  }
}
</style>